<!-- 底部 输入框 发送按钮 组件 -->
<template>
	<view style="height: 100rpx;" class="fixed-bottom flex align-center border-top bg-white">
		<!-- 聊天输入框 
		adjust-position 键盘弹起时是否自动上推页面-->
		<input
			type="text"
			v-model="chatContent"
			class="flex-1 rounded bg-light ml-2"
			style="padding:5rpx;"
			placeholder="文明发言"
			:focus="focus"
			:adjust-position="false"
			@confirm="chatSubmit"
			@blur="$emit('blur')"
		/>
		<!-- 发送 图标 -->
		<view
			class="iconfont icon-fabu flex align-center justify-center font-lg animate__animated"
			hover-class="animate__jello text-main"
			style="width: 100rpx;"
			@click="chatSubmit"
		></view>
		</view>
</template>

<script>
	export default{
		// 接收父组件传入的参数，detail详情页组件，点击回复触发
		props:{
			// 自动聚焦，默认未false
			focus:{
				type:Boolean,
				default:false
			}
		}, 
		data(){
			return{
				// 发送消息输入框
				chatContent: '',
			}
		},
		// 存放 所有事件
		methods:{
			// 发送按钮
			chatSubmit(){
				// 判断消息 是否为空
				if (this.chatContent === '') {
					return uni.showToast({
						title: '消息不可为空',
						icon: 'none', // 不显示图标
					});
				}
				// 发布一个自定义事件，传入this.chatContent输入框参数
				this.$emit('chatSubmit',this.chatContent)
				// 清空输入框
				this.chatContent='';
			}
		}
	}
</script>

<style>
</style>